<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基金业绩</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/public.css" />
		<link rel="stylesheet" href="../css/fund.css">
	</head>
	<body style="overflow-x:hidden">
		<header id="header" class="mui-bar mui-bar-nav jjs-header">
			<h2 class="mui-title">基金业绩</h2>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left header-left-result"></a>
			<a class="mui-icon mui-icon-bars mui-pull-right header-right"></a>
		</header>
		<div class="mui-content fund-net per-content pro-content ranking-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item11">股票型</a>
						<a class="mui-control-item" href="http://www.baidu.com">指数型</a>
						<a class="mui-control-item" href="#">混合型</a>
						<a class="mui-control-item" href="#">保本型</a>
						<a class="mui-control-item" href="#">债券型</a>
						<a class="mui-control-item" href="#">QDII</a>
					</div>
				</div>
				<div class="mui-slider-group">
					<div class="per-wrapper">
						<div class="mui-table-view">
						    <div class="mui-table-view-cell" onclick="strength(this)">
						        <a class="mui-navigate-right wrapper-title"><i></i>基金实力</a>
						    </div>
						    <div class="wrapper-bottom">
							    <div class="mui-row wrapper-list">
							        <div class="mui-col-sm-6 mui-col-xs-6">
							            <div class="mui-table-view-cell">
											<i class="average"></i>本公司平均：-8.1%
							            </div>
							        </div>
							        <div class="mui-col-sm-6 mui-col-xs-6">
							            <div class="mui-table-view-cell">
							                <i class="similar"></i>本公司平均：-8.1%
							            </div>
							        </div>
							    </div>
							    <div id="strength"></div>
							    <div class="mui-row wrapper-item">
							        <div class="mui-col-sm-4 mui-col-xs-4">
							            <div class="mui-table-view-cell">
											旗下股票：<span>2只</span>
							            </div>
							        </div>
							        <div class="mui-col-sm-4 mui-col-xs-4">
							            <div class="mui-table-view-cell">
							                	同类平均：<span>4.12只</span>
							            </div>
							        </div>
							        <div class="mui-col-sm-4 mui-col-xs-4">
							            <div class="mui-table-view-cell">
							                	排名：<span>29/60</span>
							            </div>
							        </div>
							        <div class="mui-col-sm-4 mui-col-xs-4">
							            <div class="mui-table-view-cell">
											旗下股票：<span>13.77亿</span>
							            </div>
							        </div>
							        <div class="mui-col-sm-4 mui-col-xs-4">
							            <div class="mui-table-view-cell">
							                	同类平均：<span>44.45亿</span>
							            </div>
							        </div>
							        <div class="mui-col-sm-4 mui-col-xs-4">
							            <div class="mui-table-view-cell">
							                	排名：<span>29/60</span>
							            </div>
							        </div>
							    </div>
							</div>
						</div>
					</div>
					<div class="per-wrapper">
						<div class="mui-table-view">
						    <div class="mui-table-view-cell" onclick="average(this)">
						        <a class="mui-navigate-right wrapper-title"><i></i>平均收益</a>
						    </div>
						    <div class="wrapper-bottom">
							    <div class="mui-row wrapper-list">
							        <div class="mui-col-sm-12 mui-col-xs-12">
							            <div class="mui-table-view-cell">
											<i class="average"></i>2017-10-13更新
							            </div>
							        </div>
							    </div>
							    <table class="mui-table wrapper-table">
							    	<thead>
							    		<tr>
							    			<th></th>
							    			<th>今年以来</th>
							    			<th>近一个月</th>
							    			<th>近6周</th>
							    			<th>近一年</th>
							    		</tr>
							    	</thead>
							    	<tbody>
							    		<tr>
							    			<td>平均收益</td>
							    			<td>4.02%</td>
							    			<td>4.02%</td>
							    			<td>4.02%</td>
							    			<td>4.02%</td>
							    		</tr>
							    		<tr>
							    			<td>同类收益</td>
							    			<td>4.02%</td>
							    			<td>4.02%</td>
							    			<td>4.02%</td>
							    			<td>4.02%</td>
							    		</tr>
							    		<tr>
							    			<td>公司排名</td>
							    			<td>4.02%</td>
							    			<td>4.02%</td>
							    			<td>4.02%</td>
							    			<td>4.02%</td>
							    		</tr>
							    	</tbody>
							    </table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/echarts-all-3.js"></script>
		<script src="../js/public.js"></script>
		<script>
			function average(e){
				$(e).parent().find(".wrapper-bottom").toggle()
			}
			
			function strength(e){
				$(e).parent().find(".wrapper-bottom").toggle()
			}
			
			var myChart = echarts.init(document.getElementById('strength'));
			var arry = []
			var data1 = [120, 132, 101, 134, 90, -230, 210];
			var data2 = [220, 182, 191, 234, 290, 330, -310];
			arry.push(data1,data2) 
            var ta=arry.join(",").split(",")
            var max = Math.max.apply(Math, ta);
            var min = Math.min.apply(Math, ta);
//          console.log(max+'....'+min)
			var w = $(window).width();
//			console.log(w)
			if(w == 320){
				var wwidth = 50
			}else{
				var wwidth = 55
			}
			option = {
			    calculable : true,
			     grid: {
			     	x:wwidth,
			     	y:10,
			        width:"80%",
			        height:220,
	

			    },
			    xAxis : [
			        {	
						show:false,
			            type : 'category',
			            boundaryGap : false,
			            data : ['周一','周二','周三','周四','周五','周六','周日']
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value',
			            max:max+max/2,
			            min:min+min/2
			        }
			    ],
			    series : [
			        {
			            name:'邮件营销',
			            type:'line',
			            stack: '总量',
			            data:data1,
			            symbol:'none',
			            itemStyle : {  
                                normal : {  
                                    lineStyle:{  
                                        color:'#ffc63e'  
                                    }  
                                }  
                            }, 
			        },
			        {
			            name:'联盟广告',
			            type:'line',
			            stack: '总量',
			            data:data2,
			            symbol:'none',
			            itemStyle : {  
                                normal : {  
                                    lineStyle:{  
                                        color:'#16b8e8'  
                                    }  
                                }  
                            }, 
			        },
			
			    ]
			};
			myChart.setOption(option);
		</script>
	</body>
</html>